<template>
	<view>
	<view class="content">
       <view class="header-open-list">
            <view class="item">
              <view class="title">中国影院 </view>
              <view class="t-content"><text class="time-txt">2019年9月18日 10:25 </text> 国语2D</view>
            </view>
        </view>
      <view class="n-line">尊贵的VIP用户：您可享受免费观影  </view>
      <view class="screen-title">UME影城（重庆沙坪坝店）1号厅  </view>
      <view class="pure_top"></view>
       <view class="center-title">
         <text class="txt">银幕中央</text>
         </view>
         <view class="seat-box-context-page">
            <movable-area class="seat-box-context">
                <movable-view class="movable-view" direction="all" :scale="true">
                  <view class="seat-item">
                      <view class="item" v-for="(item,index) in 120" :key="index"></view>
                  </view>
                </movable-view>
            </movable-area>
            <view class="left-seat">
               <view class="t-text" v-for="(item,index) in 8" :key="index">
                 {{item}}
               </view>
            </view>
         </view>
         <view class="seat-list-box">
           <view class="box"></view><view class="text">可售</view>
           <view class="box boxbg"></view><view class="text">不可售</view>
           <view class="box boxbgred iconfont  icon-gouxuan"></view><view class="text">已选</view>
           <view class="box"></view> <view class="box noleft"></view><view class="text">情侣座</view>
           <view class="box"></view><view class="text">震动座椅</view>
         </view>
		</view>
    <view class="btn-footer-pay">
      <view  class="f-text">
        <view class="t-txt">温馨提醒：</view>
        <view> 一、1.4米以下儿童须购买儿童票，儿童需在成人陪同下观影</view>
        <view >二、出票前请核对场次信息，不支持退票改签</view>
      </view>
      <view class="btn-pay" @click="btnBuy">确认</view>
    </view>
	</view>
</template>
<script>
import iconArrow from '../components/icon-arrow';
	export default {
	components: {
		iconArrow
  },
		data() {
			return {
        areaList:[1,2,3,4],
        seatList:[
          {
            list:[
              {type:1,number:1,status:true,seat:1},
              {type:1,number:1,status:true,seat:1},
              {type:1,number:1,status:true,seat:1},
              {type:1,number:1,status:true,seat:1},
              {type:1,number:1,status:true,seat:1},
              {type:1,number:1,status:true,seat:1},
              {type:1,number:1,status:true,seat:1},
              {type:1,number:1,status:true,seat:1},
              {type:1,number:1,status:true,seat:1},
              {type:1,number:1,status:true,seat:1}
            ]
          }
        ]
			}
		},
		onLoad() {
		},
		methods: {
      btnBuy(item){
				uni.redirectTo({
          url: '/pages/index/order',
        });
      },
		}
	}
</script>

<style  lang="scss" scoped>
.content{
	overflow-y:scroll;
  background-color: #f5f5f5;
}
.seat-box-context-page{
  height: px2vw(240);
  width: 100vw;
  position: relative;
}
.screen-title{
  text-align: center;
  font-size: px2vw($fz12);
  color: #888;
  height:px2vw(40);
  line-height: px2vw(40);
}
.pure_top {
    width: px2vw(260);
    height: 10px;
    border: px2vw(3) solid #F24244;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-bottom: none;
    margin: 0 auto;
}
.center-title{
  color: #888;
  margin: 0 auto;
  text-align: center;
  .txt{
    border: px2vw(1) solid #ddd;
    font-size: px2vw($fz12);
    padding:px2vw(5) px2vw(5)
  }
}
.seat-box-context{
  height: px2vw(240);
  width: px2vw(300);
  margin: px2vw(10) auto 0 px2vw(50);
  overflow: hidden;
}
.left-seat{
  width: px2vw(15);
  background-color: #ccc;
  text-align: center;
  font-size: px2vw($fz12);
  position: absolute;
  left: px2vw(15);
  top: px2vw(5);
  border-radius: px2vw(10);
  .t-text{
    padding: px2vw(5) 0;
    font-size: px2vw($fz12);
    color: #fff;
  }
}
  .header-open-list{
			width: px2vw(375);
			margin: px2vw(10) 0 0 auto;
			.item{
						height: px2vw(66);
						width: 100%;
            position: relative;
            text-indent: px2vw(15);
						color: #000;
						 .title{
							 font-size: px2vw($fz18);
               padding-top: px2vw(5);
               font-weight: 600;
             }
             }
            .t-content{
              font-size: px2vw($fz14);
              padding-top:px2vw(5); 
              color: #888;
              .time-txt{
                  color: #F24244;
                  padding-right:px2vw(5); 
              }
				}
  }
  .n-line{
    background-color: #F7BD8E;
    height: px2vw(35); 
    line-height: px2vw(35); 
    font-size: px2vw($fz14);
    color: #A5743F;
    text-align: center;
  }
  .btn-footer-pay{
    height: px2vw(135);
    width: px2vw(375);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9999;
    background-color: #ffff;
    border-top-left-radius: px2vw(15);
    border-top-right-radius: px2vw(15);
    
    .f-text{
       font-size: px2vw($fz12);
       padding: px2vw(16);
       color: #808080;
       .t-txt{
         color: #FA9529;
         font-size: px2vw($fz13);
       }
    }
    .btn-pay{
      height: px2vw(45);
      line-height: px2vw(45);
      width: px2vw(345);
      margin:0 auto;
      background-color: #E7E7E7;
      border-radius: px2vw(10);
      color: #fff;
      text-align: center;
      font-size: px2vw($fz14);
    }
  }
  .seat-item{
    position: relative;
    margin: 0 auto;
    background-color: #f5f5f5;
    .item{
      height: px2vw(20);
      width: px2vw(20);
      border-radius:px2vw(6);
      position: relative;
      background-color: #fff;
      margin: px2vw(5);
      float: left;
    }
  }
  .movable-view {
    width: px2vw(500);
    height: px2vw(270);
  }
  .seat-list-box{
    padding: px2vw(15) 0;
    display: flex;
    margin: 0 auto;
    height:px2vw(20);
    line-height: px2vw(20);
     .box{
        height:px2vw(20);
        width: px2vw(20);
        border-radius: px2vw(5);
        background-color: #fff;
        margin-left: px2vw(10);
     }
     .boxbg{
       background-color: #D0D0D0;
     }
     .boxbgred{
       background-color: #F24244;
       text-align: center;
       color: #fff;
     }
     .noleft{
       margin-left:px2vw(2);
     }
     .text{
       font-size: px2vw($fz12);
       color: #333;
       padding-left: px2vw(6);
     }
  }
</style>
